我們開始前，先處理一下header的部分吧，我們打開front-page.php,然後輸入編碼:

<?php get_header();?>

至於get_header()這部分，則是wordpress一個獨有的php編碼,透過這段編碼,就能夠讓你的wordpress主題主頁,可以連接到到header.php,這樣你的主頁,就會有標題,選單等出現了，我們又稱這為hook，wordpress有很多hook，這些hook都能夠幫助到連結檔案的。

不信？可以打開header.php,然後隨便輸入一些英文字，例如：This is the header這樣，接著我們回到wordpress那裡，然後劃過去左上的房屋標誌按訪問網站。

假若設定正確，就會看到This is the header這幾個英文字了，明白了吧？那麼我們可以開始去製作一下header.php了。

Header.php

應該還記得當初在html前篇時說的一些html的基本結構吧，你或許不知道，其實header.php也是需要負責這一部份，所以某程度上，header.php並不是網頁的頂部，而是應該說，負責網頁編碼的頂部才對。

我們先吧剛才打的英文字剷除掉，然後我們把！打出來，這時候我們會看到這個版面出來：

我們按一下enter，這樣一般html的基本結構就會出來了，神奇吧?這功能又稱作emmet，能夠加快你輸入編碼時所花費的功能，非常方便的，之後你也會經常使用到喔。

/body 和 /html

我們也說過吧，header.php是負責編碼的頂部，既然是這樣，放在編碼底部的</body>，</html>當然就不屬於這裡了，不過誰負責底部編碼？這還用說，當然footer.php，在這裡我們就先把它們移到footer.php吧。

wp_head

好，接下來要介紹一個非常重要的編碼：

<?php wphead();?>

這又是什麼來？wordpresss之所以這麼多人使用，其中一個原因，是因為他有大量強大而實用的第三方插件可以使用，讓對於前端有0了解的人，也可以製作網頁。而假若這個插件是需要到主題的header作修改時，就會需要這個編碼，讓插件能夠正確地去到header修改主題，而不是亂改一通。

用生活化點的例子去理解，假若插件提供的功能，就是你要的寄件，那麼你當然就需要提供一個正確的地址，不然怎樣也不可能成功寄到你手上，，而這個地址，在wordpress世界裏的header，就是了。

至於放在那裡？我們放在title下就可以了。

編碼節錄：

<title>Document</title>

 <?php wp_head();?>
 
</head>

不過除此之外，也會附帶一些css編碼給你。我們完成後，可以打開回剛才按訪問網頁開啟的版面，然後按右鍵，按檢視網頁原始碼，就會看到，雖然你什麼內容也沒輸入，但卻出現了大量編碼，就是這原因了。

這些編碼，部份還很不實用，至於關於這些編碼的修改方法，之後的文章會再作說明。

連接css檔案

接下來我們用bootstrap的css檔案，以及bootstrap的javascript檔案作為例子，解釋如何把檔案連進wordpress主題去。

我們先把bootstrap的檔案下載下來吧：

https://getbootstrap.com/docs/4.5/getting-started/download/#compiled-css-and-js

接著把它解壓縮，然後打開文件，把css和jvascript檔案，放到你的主題的檔案裡。

檔案是下載好了，但又要怎樣把它放到主題裏？

之前我們曾經提及過，假如需要把檔案連接到html內，我們可以像這樣子：

<link rel="stylesheet" href="styles.css">

不過這方法在wordpress內卻是行不通的，為什麼呢？

雖然邏輯上，這樣做是沒有錯，不過wordpress系統可沒你想像中那麼聰明，透過這樣的方法插入額外附加檔案，wordpress並不會知道，究竟這些css檔案使用了沒，這樣在運行時，容易會發生錯誤，出現問題。

特別是當有另外一個插件，需要使用到相同的css檔案時，這樣問題就大了，因為系統並不知道載入了沒，這最終會導致系統重複載入檔案，而造成了錯誤，所以我們需要透過另外一個方法，讓這些檔案，能夠連進去。

而這方法，有點像我們領取籌號，等待進入餐廳這過程，不過這些編碼，都需要在function.php輸入的。

不過為什麼不在style.css？style.css就只是要來直接輸入一些css 編碼，以及寫下一些關於主題的資料用，當你需要直接把檔案連接wordpress主題內，就會需要使用function.php，來實現這功能。

領取籌號

一般我們需要先領取籌號，讓餐廳員工知道我們在需要進入餐廳，對吧？在wordpress裏，我們則需要先為需要用到的檔案，登記一下，讓wordpress知道，這裡有個檔案呀。

編碼詳細內容：

既然是php，當然我們也要上邊那樣，先用<?php 告訴系統，現在用php 吧。

哪怕是排隊，也會有籌號，當叫你籌號的時候，你就會知道，現在到你了，所以我們也要為它改一個名字,這樣之後我們要用到這功能，這css檔案時，只需要叫一下它的名字，就可以了，這裡簡單點，我們就稱為bootstrap_css()

編碼：

<?php
function bootstrap_css()  

function，在這裡的意思為加設一個功能，假如把它翻譯成人看的語言，就會是這樣：加設一個功能，並把這功能命名為bootstrap_css()。

這裡注意一點的是，() 必須加入，只有前方的文字是可以更改，另外文字命名上也是有規則的啊：

1.只可以使用小寫英文字母
2.若需要分開兩個英文字，那麼必須要使用_來分隔，像上方那樣
3.不能超過五個英文字

功能的名字是改好了，不過我們還是沒登記呀，好那麼我們開始吧，這裡給大家先看一看完整的編碼:

<?php

function bootstrap_css()
{
wp_register_style('bootstrap',get_template_directory_uri().'/css/bootstrap.min.css',array(),false,'all');
wp_enqueue_style('bootstrap');
}

**wp_register_style：**就是在告訴wordpress，現在開始登記

**'bootstrap'：**這也是在加入名字，不過這次不是在為功能加入名字，而是為你將要放進去的檔案，加入名字。有了這名字，之後也才可以讓這個檔案去等待，也才可以讓它去幹事，例如讓它和其他檔案連結起來，現在不太明沒關係，看下去就會知道這名字的用途了。

**get_template_directory_uri()：**要知道整個wordpress的檔案這麼多，它又該在哪裡找呢，這個編碼就告訴了wordpress，這檔案就在這主題檔案裏，同時它也會生成一個連結，方便你之後查閱。

**'/css/bootstrap.min.css'：**雖然上方確實是指出了位置在那，但對於wordpress來說，這就好像只提供了尋寶圖一半內容一樣，它還是很難找到正確位置，既然你要讓wordpress連接這檔案，當然就要告訴它準確位置在哪，不然它怎麼找。不過為何不選擇上載bootstrap.css，而是選擇上載bootstrap.min.css？這是因為我們希望檔案能夠盡量壓小，min版與普通版相比，會省略了空白位置以及文字說明，檔案因此會較小。

**array()：**假若你用的檔案，是必需要跟隨某個檔案，才能正常運作，那麼就需要在（）裡，加入那個檔案名稱（沒錯就是你在上方加入的那個，這也是其中一個用途），不然像現在那樣，就可以了。

**false：**這是要來放檔案的版本號碼的，例如'1'，'1.2' 這樣，假若沒什麼版本分別的話，那麼就輸入false，讓系統自動加入，系統會根據wordpress的版本來加入版本號，假若真的不想看到它，那就輸入null吧

**all：**這個主要是要來設定，您希望在甚麼裝置中出現（詳細裝置的選擇可以看這裡），或在甚麼螢幕大小時候出現。假若任何情況都合適使用，那麼設定'all'就可以了。

不過對於wordpress來說，這領取籌號的動作並不一定是需要的，但用了它有兩個好處：

1.可以確保您的檔案不會因為插件用的是相同，而重複加載編碼，讓你
你主題運作時，出現大量不必要的編碼，加大加載時間
2 可以讓你的編碼，可以在主題內，重複使用

假若不用呢，則可以把wp_register_style部分改為wp_enqueue_style，其他全部一樣就可以了。這樣就可以把領取籌號的過程跳過，直接到下方的等候階段。

等候

領取籌號後，我們當然是要等候一下，待有空位置時，我們才可以到店內用餐。Wordpress的情況也是有點類似，我們也是需要安排bootstrap檔案，去等候一下，準備讓我們放到上使用。

這裡編碼非常簡單，只需要放入wp_enqueue_style( );，然後在括號內，加入你希望放去等候區的檔案，並且用' '來包裹著，例如在我這裡，就會是wp_enqueue_style( 'bootstrap' );

wp_enqueue_style
讓這css code放去等候區，假若你還沒登記的話，則會幫助你登記那個css code

進入餐廳

等了這麼久，終於到自己的籌號，可以進餐廳用餐了。在wordpress也是這樣，當需要用到這功能時，就需要叫一下功能的名字，讓它能夠出來到上，注意啊，這個要放在funtion｛｝外啊

完整編碼:

add_action('wp_enqueue_scripts', 'bootstrap_css' );

add_action: 讓這功能能夠運作起來

wp_enqueue_scripts: 讓這功能可以在主題裏出現，注意呀，這個和下方的wp_enqueue_script是不同的，這個是讓css／javascript，可以放到主題裏去使用，wp_enqueue_script，則只是安排javascript到等候區等候

'bootstrap_css' ：這功能的名字

整個完整編碼就會長這樣子:

<?php

function bootstrap_css()
{
  wp_register_style('bootstrap',get_template_directory_uri().'/css/bootstrap.min.css',array(),false,'all');
  wp_enqueue_style('bootstrap');
}
add_action('wp_enqueue_scripts','bootstrap_css');

完成後，大家可以回到之前打開的網頁原始碼，並重新載入一次，就會看到，你剛放下去的檔案會在編碼裏出現，這就代表你成功了。

連接Javascript檔案

好，到javascript了。

不過在之前，我們需要做一些小設定。相信，大家都會希望用家在進入網頁時，能夠先看到網頁內容，而不是長期只看到空白頁。

不過該怎樣做？大家還記得吧，網頁的外觀是需要依靠，html和css兩者並存，缺一不可，而javascript則一般不會影響外觀。所以我們需要把javascript放在底部的位置，這樣用家就能夠在短時間内，看到網頁內容，而不會因為需要花費大量時間在載入javascript檔案，讓網站載入時長時間都只是看到空白頁，影響用家體驗。

所以，我們也需要像在header那樣，到footer那裡加入，然後再到index.php 加入

完成後，可以回到剛才的網頁編碼畫面，並重新載入一次，就會看到下方自動生成了大量編碼，這就代表你沒做錯了

基本上導入javascript和css的分別並不大

完整編碼如下:

function bootstrap_javascript()
{
  wp_register_script('bootstrap',get_template_directory_uri().'/js/bootstrap.min.js', 'jquery',false,true);
  wp_enqueue_script('bootstrap');
  wp_enqueue_script('jquery');
}

add_action('wp_enqueue_scripts','bootstrap_javascript');

你會留意到大部分，都和上方導入css檔案時，是相同的，只有以下這小部分，是更改了：

wp_register_script： 因為我們這次是導入javascript，所以將wp_register_style更改為wp_register_script

**'/js/bootstrap.min.js'：**既然我們是要讀取javascript，那麼自然檔案名稱也是不同，這裡我們也會採用min版本，讓檔案變小

**jquery：**這次我們加入了jquery，為什麼呢？因為bootstrap4是需要依賴jequery這個程式庫，一個已經預先準備了大量javasript編碼，能夠讓用家透過簡單編碼，直接使用javascript的插件，來實現javascript的功能，所以我們在這裡需要加入jquery。

**true：**和css不同，我們也需要在這裡設定，希望這javascript，在一開始就載入，還是到底部才開始載入。不過我們當然不希望在頂部時開始載入，所以我們這裡用true，若設定為false的話，則會在頂部時就開始載入。

** wp_enqueue_script('jquery')：**既然要使用到jquery，我們也要安排jequery到等候區，不然之後需要時也用不了。不過為什麼不用登記呢，因為jquery在原先wordpress系統裏已經備有，所以就不需要了。

完成後，大家可以回到之前打開的網頁原始碼，並重新載入一次，就會看到，你剛放下去的檔案會在編碼裏出現，這就代表你成功了。